<!DOCTYPE html>
<html>
	<head>
		
				<meta charset="utf-8">
				<title>图片的DOM操作</title>
				<style type="texts">
					html,div,ul,li {margin: 0px;padding: 0px;}
					a{cursor: pointer;}
					li {list-style: none;cursor: pointer;}
					fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
					fieldset p{width: 225px;word-wrap:break-word;}
					#cont_left {width: 300px;height: 500px;float: left;}
					#cont_right {float: left;}
					.newcss1{background-color: yellowgreen;}
				</style>
			</head>
			<body>
				<div id="cont_left">
					<ul><img src="img/doc.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
						<ul id="menu1">
							<li><img src="img/doc.gif" id="gets">获取原始图片路径<>
							<li><img src="img/doc.gif" >获取我喜欢的水果<>
						</ul>
					</ul>
		
					<ul><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
						<ul id="menu2">
							<li><img src="img/doc.gif" id="getsg">创建图片<>
							<li><img src="img/doc.gif">克隆图片<>
							<li><img src="img/doc.gif">改变图片<>
							<li><img src="img/doc.gif">删除图片<>
						</ul>
					</ul>
		
					<ul><img src="img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
						<ul id="menu3">
							<li><img src="img/doc.gif">为原始图片加上行间样式<>
							<li><img src="img/doc.gif">为所有的fieldset加上内部样式<>
						</ul>
					</ul>
		
				</div>
				<fieldset>
					<legend>原始图片</legend>
					<img id="fruit" src="img/fruit.jpg">
				</fieldset>
				<fieldset>
					<legend>图片路径</legend>
					<p id="m1">在这里显示</p>
				</fieldset>
				<fieldset>
					<legend>选择你喜欢的水果</legend>
					<ul style="text-align: left;">
						<li>
							<input name="enjoy" type="checkbox" value="苹果" />苹果
						<>
						<li>
							<input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
						<>
						<li>
							<input name="enjoy" type="checkbox" value="葡萄" />葡萄
						<>
						<li>
							<input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
						<>
						<li>
							<input name="enjoy" type="checkbox" value="西瓜" />西瓜
						<>
					</ul>
					<div id="m2" style="margin-top: 10px;text-align: left;"></div>
				</fieldset>
				<fieldset>
					<legend>创建图片</legend>
					<div id="m3" >
						<img src="img/grape.jpg" >
					</div>
				</fieldset>
				<fieldset>
					<legend>克隆图片</legend>
					<div id="m4">
						<img src="img/fruit.jpg" >
					</div>
				</fieldset>
				<script>
					//1.获取图片路径
					let xianshi =document.getElementById("m1");
					let huoqu = document.getElementById("gets");
					document.addEventListener('click',function one(){
						xianshi.textContent=("D:/大二下学期/客户端/资源包02/img/fruit.jpg");
					});
					//2.获取喜欢的水果
					let hqsg =document.getElementById("getsg");
					let xssg =document.getElementById("m2");
					document.onclick = function two(){
						xssg.textContent="li";
					};
					//3.创建图片
					let hqsg =document.getElementById("getsg");
					let xssg =document.getElementById("m3");  
					document.onclick = function two(){
						xssg.image="url(./img/grape.jpg)";
					};
					//4.克隆图片
					let hqsg =document.getElementById("getsg");
					let xssg =document.getElementById("m4");
					document.onclick = function two(){
						xssg.image="url(./img/grape.jpg)";
					};
					//5.修改图片
					let hqsg =document.getElementById("gets");//209010104 李巧玲
					let xssg =document.getElementById("m1");
					document.onclick = function two(){
						<style>
						height=100px;
						width = 100px;
						<yle>
						xssg.image="url(./img/grape.jpg)";
					};
					//6.删除图片
					let hqsg =document.getElementById("gets");
					let xssg =document.getElementById("m1");
					document.onclick = function two(){
					
					//7.
					//菜单收缩与扩展
					function show(item) {
						let currentMenu = document.getElementById(item);
						let currentStatus = currentMenu.style.display;
						currentMenu.style.display = currentStatus == "" ? "none" : "";
					}			
					
				</script>
			</body>
		</html>

	